<template>
  <div class="seek-container">
    <van-popup
      v-model="show"
      :close-on-click-overlay="false"
      position="top"
      :style="{ height: '100%' }"
    >
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSeek"
          @cancel="onCancel"
        />
      </form>
      <div class="seekwarp">
        <div class="card">
          <div class="header">
            <h3>搜索历史</h3>
            <i @click="clearHistory" class="iconfont icon-trash"></i>
          </div>
          <div class="hotSeek">
            <span
              @click="seekData(item)"
              v-for="(item, index) in historyData"
              :key="index"
              >{{ item }}</span
            >
          </div>
        </div>
        <van-divider />
        <div class="card">
          <div class="header">
            <h3>热门搜索</h3>
            <i @click="eyeOpen = !eyeOpen" :class="['iconfont', eyeClass]"></i>
          </div>
          <div class="hotSeek" v-if="eyeOpen">
            <span>华为</span>
            <span>金士顿</span>
            <span>笔记本电脑</span>
            <span>苹果</span>
            <span>飞利浦</span>
            <span>尼康</span>
            <span>佳能</span>
          </div>
          <div class="text-center" v-else>已隐藏热门搜索</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      show: true,
      eyeOpen: true,
      historyData: JSON.parse(localStorage.getItem("historyData") || '[]'),
    };
  },
  computed: {
    eyeClass() {
      return this.eyeOpen ? "icon-yanjing" : "icon-guanbi-yanjing";
    },
  },
  methods: {
    async _fetchSeekData(value) {
      // 1.发送请求获取关键字查询
      if (!this.historyData.includes(value)) {
        this.historyData.unshift(this.value);
        localStorage.setItem("historyData", JSON.stringify(this.historyData));
      }
      // 把关键字带到搜索结果页面去搜索
      this.$router.push("/seek-result/" + this.value);
    },
    onSeek() {
      // 有输入文字
      
      this._fetchSeekData(this.value);
    },

    seekData(value) {
      // 这个是拿到历史里面的数字
      this.value = value;
      this._fetchSeekData(value);
    },
    onCancel() {
      // this.$toast('取消')
      this.$router.back();
    },
    clearHistory() {
      this.$dialog
        .confirm({
          message: "确认清空？",
        })
        .then(() => {
          // on confirm
          this.historyData = [];
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.seek-container {
  .seekwarp {
    .card {
      padding: 6px;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 4px;
      }

      .hotSeek {
        display: flex;
        flex-wrap: wrap;

        span {
          height: 30px;
          line-height: 30px;
          background: linear-gradient(to right, #ddcbc6, #30dbe0);
          font-size: 14px;
          margin-right: 6px;
          padding: 2px 4px;
          text-align: center;
          border-radius: 6px;
          margin: 4px;
        }
      }
    }
  }
}
</style>
